uni

2023-03-16 02:03| 来源: 网络整理| 查看: 265

最近使用uni-app开发h5时遇到下拉刷新状态无法关闭的问题，记录一下

需求场景

页面是一个列表页顶部有一个搜索框，列表区域使用scroll-view组件自定义下拉刷新，通过refresher-triggered来控制加载状态的显示隐藏

文档说明 refresher-triggered用于设置当前下拉刷新状态：

true 表示下拉刷新已经被触发 false 表示下拉刷新未被触发

@refresherpulling用来定义自定义下拉刷新控件被下拉时触发的事件 @refresherrefresh用来定义自定义下拉刷新被触发执行的事件

然而发现在自定义下拉刷新执行事件中直接将refresher-triggered绑定的值改为false后并不会关闭加载状态。

解决办法 refresher-triggered的初始值为false 要先变为true，执行完刷新操作之后再变为false才会有效果，所以在自定义下拉刷新控件被下拉时触发的事件中将值置为true并加一些延时再变为false才有了效果。

页面代码示例：

export default { data() { return { triggered: false } }, methods: { onPulling() { var that = this; if(!this.triggered){ //下拉加载，先让其变true再变false才能关闭 this.triggered = true; //关闭加载状态 (转动的圈)，需要一点延时才能关闭 setTimeout(() => { that.triggered = false; },1000) } }, onRefresh() { // 自定义下拉刷新被触发执行 } } } 参考资料 scroll-view(https://uniapp.dcloud.io/component/scroll-view?id=scroll-view)

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章